<template>
  <div class="user-list">
    <div class="page-header">
      <h2>用户管理</h2>
      <el-button type="primary" @click="showAddDialog = true">
        <el-icon><Plus /></el-icon>
        添加用户
      </el-button>
    </div>
    
    <el-table :data="users" style="width: 100%" v-loading="loading">
      <el-table-column prop="userId" label="ID" width="80" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="realName" label="真实姓名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column label="用户类型">
        <template #default="scope">
          <el-tag v-if="scope.row.userType === 1" type="danger">管理员</el-tag>
          <el-tag v-else-if="scope.row.userType === 2" type="primary">客户</el-tag>
          <el-tag v-else-if="scope.row.userType === 3" type="success">服务人员</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="editUser(scope.row)">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="deleteUser(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    
    <el-dialog
      v-model="showAddDialog"
      title="添加用户"
      width="500px"
    >
      <el-form :model="addForm" :rules="addRules" ref="addFormRef">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" type="password" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="addForm.realName" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="addForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addForm.email" />
        </el-form-item>
        <el-form-item label="用户类型" prop="userType">
          <el-select v-model="addForm.userType" placeholder="请选择用户类型">
            <el-option label="管理员" :value="1" />
            <el-option label="客户" :value="2" />
            <el-option label="服务人员" :value="3" />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="handleAddUser">确定</el-button>
      </template>
    </el-dialog>

    
    <el-dialog
      v-model="showEditDialog"
      title="编辑用户"
      width="500px"
    >
      <el-form :model="editForm" :rules="editRules" ref="editFormRef">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="editForm.realName" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editForm.email" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editForm.address" />
        </el-form-item>
        <el-form-item label="用户类型" prop="userType">
          <el-select v-model="editForm.userType" placeholder="请选择用户类型">
            <el-option label="管理员" :value="1" />
            <el-option label="客户" :value="2" />
            <el-option label="服务人员" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status" placeholder="请选择状态">
            <el-option label="正常" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="handleEditUser">更新</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'

export default {
  name: 'UserList',
  data() {
    return {
      users: [],
      loading: false,
      showAddDialog: false,
      showEditDialog: false,
      addForm: {
        username: '',
        password: '',
        realName: '',
        phone: '',
        email: '',
        userType: 2
      },
      editForm: {
        userId: null,
        username: '',
        realName: '',
        phone: '',
        email: '',
        address: '',
        userType: 2,
        status: 1
      },
      addRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        userType: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ]
      },
      editRules: {
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        userType: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ]
      }
    }
  },
  
  async mounted() {
    await this.loadUsers()
  },
  
  methods: {
    async loadUsers() {
      this.loading = true
      try {
        const response = await api.get('/api/users')
        if (response.success) {
          this.users = response.data
        } else {
          ElMessage.error('加载用户列表失败')
        }
      } catch (error) {
        console.error('加载用户失败:', error)
        ElMessage.error('加载用户列表失败')
      } finally {
        this.loading = false
      }
    },
    
    async handleAddUser() {
      try {
        await this.$refs.addFormRef.validate()
        
        const response = await api.post('/api/users', this.addForm)
        if (response.success) {
          ElMessage.success('添加用户成功')
          this.showAddDialog = false
          this.resetAddForm()
          await this.loadUsers()
        } else {
          ElMessage.error('添加用户失败')
        }
      } catch (error) {
        console.error('添加用户失败:', error)
        ElMessage.error('添加用户失败')
      }
    },
    
    editUser(user) {
      this.editForm = { ...user }
      this.showEditDialog = true
    },

    async handleEditUser() {
      try {
        await this.$refs.editFormRef.validate()
        
        const response = await api.put(`/api/users/${this.editForm.userId}`, this.editForm)
        if (response.success) {
          ElMessage.success('更新用户成功')
          this.showEditDialog = false
          await this.loadUsers()
        } else {
          ElMessage.error('更新用户失败')
        }
      } catch (error) {
        console.error('更新用户失败:', error)
        ElMessage.error('更新用户失败')
      }
    },
    
    async deleteUser(user) {
      try {
        await ElMessageBox.confirm(
          `确定要删除用户 ${user.realName} 吗？`,
          '删除确认',
          { type: 'warning' }
        )
        
        const response = await api.delete(`/api/users/${user.userId}`)
        if (response.success) {
          ElMessage.success('删除用户成功')
          await this.loadUsers()
        } else {
          ElMessage.error('删除用户失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除用户失败:', error)
          ElMessage.error('删除用户失败')
        }
      }
    },
    
    resetAddForm() {
      this.addForm = {
        username: '',
        password: '',
        realName: '',
        phone: '',
        email: '',
        userType: 2
      }
    }
  }
}
</script>

<style scoped>
.user-list {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}
</style> 